<template>
  <router-layout>
    <div class="container van-hairline--top">
      <div v-if="isComBox" class="fill-in">
        <Container @isconceal="isComBox=false"></Container>
      </div>
      <!-- 暂无数据组件 -->
      <Nodata v-if="isNoData"></Nodata>
      <div v-else class="content-box">
        <van-list v-model="loading" :finished="finished" @load="onLoad">
          <van-cell v-for="(item, index) in dataList" :key="index">
            <van-row type="flex" align="center">
              <van-col :span="4">
                <div class="img-box">
                  <img
                    :src="item.portrait?item.portrait:'https://gw.alicdn.com/tfs/TB15Q0lOmzqK1RjSZFHXXb3CpXa-400-400.png'"
                    width="100%"
                    height="100%"
                    alt
                  >
                </div>
              </van-col>
              <van-col :span="20">
                <div class="text-box">
                  <van-row type="flex" justify="space-between" align="center">
                    <van-col>
                      <p class="usename-text">{{ item.comment_username}}</p>
                    </van-col>
                    <van-col>
                      <p class="reply-text" @click="replyPost(item)">回复</p>
                    </van-col>
                  </van-row>
                  <p class="time-text">{{item.comment_time}}</p>
                </div>
              </van-col>
            </van-row>
            <div class="read-text">
              <p>{{ item.comment_content }}</p>
            </div>
            <div class="post-content">
              <van-row type="flex" align="center">
                <van-col>
                  <div class="post-box">
                    <img :src="item.file_path" width="100%" alt>
                  </div>
                </van-col>
                <van-col>
                  <div class="post-text">
                    <p class="title-text">{{ item.article_title }}</p>
                    <!-- <p class="post-content-text">{{ item.article_content }}</p> -->
                    <!-- <p class="post-content-text" v-html="item.article_content"></p> -->
                  </div>
                </van-col>
              </van-row>
            </div>
          </van-cell>
        </van-list>
      </div>
    </div>
  </router-layout>
</template>

<script>
import { article_listCommentMy } from "@/api/article";
import Nodata from "../public/nodata/Nodata"; // 导入暂无数据组件
import Container from "../public/commentContainer/container"; // 导入发表评论组件
import { clacTime } from "@/utils";
import TitleItem from "../../components/public/title/title";

export default {
  name: "commentMy",
  components: { Nodata, Container, TitleItem },
  data() {
    return {
      isNoData: false,
      loading: false,
      finished: false,
      isComBox: false,
      isHide: false,
      listQuery: {
        current: 1,
        limit: 5,
        company_id: localStorage.getItem("companyId")
      },
      dataList: [],
      detailId: "",
      total: ""
    };
  },
  methods: {
    replyPost(item) {
      this.isComBox = !this.isComBox;
      this.detailId = item.id;
      let replyinfo = {
        parent_id: item.comment_id,
        article_id: item.id,
        comment_content: "",
        like_nums: 0,
        company_id: localStorage.getItem("companyId") - 0
      };
      this.$store.dispatch("SetCommenInfo", replyinfo);
    },
    //获取数据
    async initList() {
      let query = Object.assign(this.listQuery);
      let res = await article_listCommentMy(query);
      let result = res.data;
      if (result.status == 100) {
        this.dataList = result.data.rows.map(item => {
          return Object.assign({}, item, {
            comment_time: clacTime(item.comment_time)
          });
        });
        this.total = result.data.results;
        if (!this.total) {
          this.isNoData = true;
        }
      }
      this.loading = false;
      if (result.data.results <= this.dataList.length) {
        this.finished = true;
      }
    },
    onLoad() {
      setTimeout(() => {
        this.listQuery.limit += 2;
        this.initList();
      }, 1000);
    }
  },
  created() {
    this.initList();
  }
};
</script>

<style lang="scss" scoped>
@import "commentMy";
</style>

